<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue'
import { defineAsyncComponent } from 'vue'
import { options } from '@/components/MonacoEditor/monaco.config'

import Tooltip from './Tooltip.vue'

const Monaco = defineAsyncComponent(() => import('@/components/MonacoEditor/Monaco.vue'))

const tooltipRef = ref<any>(null)

const handleEditorChange = () => {}
const code = ref(
    '#include<iostream>\n' +
        'using namespace std;\n' +
        '\n' +
        'int main(){\n' +
        '    int a;\n' +
        '    cin>>a;\n' +
        '    int b;\n' +
        '    cin>>b;\n' +
        '    cout<<a+b-b<<endl;\n' +
        '    return 0;\n' +
        '}'
)

const theme = ref('vs-dark')
const language = ref('cpp')
const editorDidMount = () => {
    // eslint-disable-next-line no-unsafe-optional-chaining
}
</script>

<template>
    <a-flex>
        <div style="margin-top: 1.875rem">
            <Monaco
                ref="monacoRef"
                id="monaco-editor"
                @editorDidMount="editorDidMount"
                @change="handleEditorChange"
                v-model:value="code"
                :theme="theme"
                :language="language"
                :width="1000"
                :height="680"
                :options="options"
            />
        </div>
        <Tooltip ref="tooltipRef" />
        <div class="block">
            <p>变量</p>
            <br />
            <p>监视</p>
            <br />
            <p>调用堆栈</p>
            <br />
            <p>断点</p>
            <br />
            <p>控制台</p>
            <br />
        </div>
    </a-flex>
</template>

<style scoped>
.debug-monaco-editor {
    cursor: move;
}
</style>
